<template>
  <div>
    <el-card>
      <p>我的补料单</p>
      <div class="searchArea">
        <el-form ref="searchForm"
                 :inline="true"
                 :model="searchForm"
                 label-position="left">
        <el-form-item label="制造商：">
            <el-select v-model="searchForm.value" clearable
                       placeholder="请选择">
              <el-option v-for="item in AllSlist"
                         :key='item.id'
                         :label="item.menuName"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        <el-form-item label="制造商料号：">
          <el-input v-model="searchForm.aksNum"
                    placeholder="请输入制造商料号"
                    ></el-input>
        </el-form-item>
           <el-form-item label="交货时间"
                        prop="timeRange">
            <el-date-picker v-model="searchForm.timeRange"
                            clearable
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type='primary'
                       @click="searchData">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type='primary'
                       @click="applyProDialog">申请</el-button>
          </el-form-item>
          <el-button type='primary'
                       @click="dialogFormVisible=true">导出</el-button>
          <el-form-item>
            <el-button type='primary'
                       style="margin-left:15px" @click="downloadExcel"
                      >模板下载</el-button>
          </el-form-item>
          <el-button type='primary'
                       @click="uploadDateSheetVisible=true">批量申请</el-button>
        </el-form>
      </div>
      <div class="tableBox">
        <el-table :data="tableData"
                  style="width: 100%"
                  height="500"
                  stripe
                  @selection-change="handleSelectionChange">
          <el-table-column prop="orderNum"
                           label="补料单号"
                           align="center"></el-table-column>
          <el-table-column prop="productManuNum"
                           label="制造商料号"
                           align="center"></el-table-column>
          <el-table-column prop="meunName"
                           label="制造商"
                           align="center"></el-table-column>
          <el-table-column prop="stock"
                           label="数量(个)"
                           align="center"></el-table-column>
                        
          <el-table-column prop="dealTime"
                           label="交货时间"
                           align="center"></el-table-column>
          <el-table-column prop="price"
                           label="补料单价(￥)"
                           align="center"></el-table-column>
          <el-table-column prop="tax"
                           label="税金13%(￥)"
                           align="center"></el-table-column>
           <el-table-column prop="askAccount"
                           label="提交人"
                           align="center"></el-table-column>
         
          <el-table-column prop="status"
                           width="100"
                           label="审批状态"
                           align="center">
            <template slot-scope="scope">
              <el-tag type="success"
                      v-show="scope.row.oldstatus==1">已审批</el-tag>
              <el-tag type="success"
                      v-show="scope.row.oldstatus==0">待审批</el-tag>
              <el-tag type="danger"
                      v-show="scope.row.oldstatus==2">已婉拒</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="120">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="checkDetail(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align:center;margin-top:20px"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[5, 10, 15, 20]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"></el-pagination>
      </div>
    </el-card>
    <el-dialog
      title="提示"
      :visible.sync="uploadDateSheetVisible"
      width="30%"
    >
      <span>上传文件</span>
      <el-upload
        ref="uploadMutiple"
        class="upload-demo"
        drag
        :auto-upload="false"
        :show-file-list="false"
        :multiple="false"
        :before-upload="beforeUploadPdf"
        :http-request="uploadPdf"
        :on-change = "changePdf"
        action
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <!---
        <div class="el-upload__tip" slot="tip">{{updateForm.pdfUrl}}</div>
        -->
        <div class="el-upload__tip" slot="tip">{{updateForm.pdfname}}</div>
      </el-upload>
       <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="summitUpload">确定上传</el-button>
        <el-button size="mini" @click="uploadDateSheetVisible=false">取消</el-button>
       
      </div>
    </el-dialog>

    <el-dialog title="补料单申请"
               :visible.sync="dialogVisible"
               width="40%">
      <el-form ref="supplementForm"
               :model="supplementForm"
               label-position="right"
               label-width='170px'
               style="width:100%">
        
        <!-- <el-form-item label="制造商料号：">
          <el-input v-model="supplementForm.productCode"
                    placeholder="请输入制造商料号"
                    :disabled="isUpdate"
                    style="width:65%"></el-input>
        </el-form-item> -->
        <el-form-item label="制造商料号：">
          <el-select
            v-model="productListValue" clearable
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="searchOrderNum" @change="changeOrderNum"
           >
            <el-option
              v-for="item in productList"
              :key="item.id"
              :label="item.productCode"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="制造商：">
          <el-input v-model="supplementForm.menuName"
                    placeholder="请输入制造商"
                    disabled
                    style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="AKS料号：">
          <el-input v-model="supplementForm.aksNum"
                    placeholder="请输入AKS料号"
                    disabled
                    style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="价格(￥)：">
          <el-input v-model="supplementForm.price" @input="changePrice"
                    placeholder="请输入单价"
                    style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="美金价格($)：">
          <el-input v-model="supplementForm.dollar" @input="changePrice"
                    placeholder="请输入美金价格"
                    style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="税金13%：">
          <el-input v-model="supplementForm.tax"
                    placeholder="请输入税金"
                    style="width:65%"></el-input>
        </el-form-item>
                <el-form-item label="购买数量(个)：">
          <el-input v-model="supplementForm.stock"
                    placeholder="请输入购买数量"
                    style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="交货日期：">
          <el-date-picker v-model="supplementForm.dealTime"
                          type="datetime"
                          placeholder="请输入交货日期"
                          style="width:65%">
          </el-date-picker>
          <!--<el-input v-model="supplementForm.dealTime" placeholder="请输入交货日期" style="width:65%"></el-input>-->
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="supplementForm.memo"
                    placeholder="请输入物料描述"
                    style="width:65%"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <div style="text-align:center">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="applyProduct">确 定</el-button>
        </div>
      </span>
    </el-dialog>
    <el-dialog title="详情" :visible.sync="detailDialogFormVisible">
      <el-form ref="supplementForm"
               :model="supplementForm"
               label-position="right"
               label-width='170px'
               style="width:100%">
        
        <el-form-item label="制造商料号：">
          <el-input v-model="supplementForm.productManuNum"
                    disabled
                    style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="制造商：">
          <el-input v-model="supplementForm.meunName"
                    disabled
                    style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="AKS料号：">
          <el-input v-model="supplementForm.aksNum"  disabled
                    style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="单价(￥)：">
          <el-input v-model="supplementForm.price" disabled
                    style="width:65%"></el-input>
        </el-form-item>
         <el-form-item label="美金价格($)：">
          <el-input v-model="supplementForm.dollar" disabled
                    style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="税金(￥)：">
          <el-input v-model="supplementForm.tax" disabled
                    style="width:65%"></el-input>
        </el-form-item>
                <el-form-item label="购买数量：">
          <el-input v-model="supplementForm.stock" disabled
                    style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="交货时间：">
          <el-input v-model="supplementForm.dealTime" disabled style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="supplementForm.memo" disabled
                    style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="审批状态">
          <el-input v-model="supplementForm.status_zh" disabled
                    style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="是否入库">
          <el-input v-model="supplementForm.inStore" disabled
                    style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="入库数量">
          <el-input v-model="supplementForm.inStoreNum" disabled
                    style="width:65%"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <div style="text-align:center">
          <el-button @click="detailDialogFormVisible = false">返回</el-button>
        </div>
      </span>
    </el-dialog>
    <el-dialog title="导出补料单" :visible.sync="dialogFormVisible">
      <el-form :model="downLoadForm">
       <el-form-item label="制造商：">
            <el-select filterable v-model="value"
                       placeholder="请选择">
              <el-option v-for="item in AllSlist"
                         :key='item.id'
                         :label="item.menuName"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审批状态">
            <el-select v-model="downLoadForm.statusValue"
                       placeholder="请选择">
              <el-option v-for="item in AllStatuslist"
                         :key='item.id'
                         :label="item.menuName"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间"
                        prop="timeRange">
            <el-date-picker v-model="downLoadForm.timeRange"
                            clearable
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="downLoadData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  PRODUCT_MAKEUP_LIST, PRODUCT_MAKEUP_APPLY, MAKEUP_DOWNLOAD,LIST_BY_PRODUCT_CODE,
  MENUINFOBYLIAOHAO, SUPPLIER_ALLLIST, PRODUCT_MAKEUP_LISTBYMENU
} from '@/utils/api';
import axios from "axios";
import { formatDate } from '@/utils/validate.js';
export default {
  data () {
    return {
      productListValue:{},
      AllStatuslist: [
          { id: 0, menuName: "待审批" },
          { id: 1, menuName: "已审批" },
          { id: 2, menuName: "已婉拒" }
        ],
      pdfUrl:'',
      isUpdate:false,
      detailDialogFormVisible:false,
      uploadDateSheetVisible: false,
      downLoadForm:{
        value:null,
        isHandle:false,
        timeRange:[],
         AllSlist: [
          { id: 1, menuName: "傲然" },
          { id: 2, menuName: "咩咩" },
          { id: 3, menuName: "mc" },
          { id: 4, menuName: "lulu" }
        ]
      },
      formLabelWidth: '120px',
      dialogFormVisible: false,
      searchForm: {
        timeRange: [new Date().getTime()-2592000000,new Date().getTime()+86400000],
        value:null,
        aksNum:''
      },
      supplementForm: {
        meunId:null,
        menuName:'',
        aksNum: "",
        askCode:'',
        productManuNum: "",
        meunId: "",
        menuName: "",
        memo: "",
        productAddress: "",
        unit: "",
        stock: "",
        price: "",
        dollar:'',
        tax: '',
        dealTime: "",
      },
      downloadUrl:"https://yzbban.oss-cn-shanghai.aliyuncs.com/",
      tableData: [

      ],
      currentPage: 1,
      pageSize: 10,
      total: 50,
      dialogVisible: false,
      value: '',
      AllSlist: [],
      productList:[],
       updateForm: { imageUrl: "", pdfUrl: "" ,excelUrl:"", pdfname:""},
    };
  },
  created () {
    this.getAllList()
    this.getList()
  },
  methods: {
    changePrice(){
      var p=this.supplementForm.price
      this.supplementForm.tax=p*0.13
    },
    changeOrderNum(row){
      console.log('row: '+row)
      var se;
      for(se of this.productList){
          console.log('se.id: '+se.id)
         if(se.id==row){
            console.log('se: '+JSON.stringify(se))
            this.supplementForm.aksNum=se.askCode
            this.supplementForm.menuName=se.menuName
            this.supplementForm.meunId=se.meunId
            console.log('se.2222: '+se.askCode)
         }
      }
    },
    searchOrderNum(code){
      LIST_BY_PRODUCT_CODE({
        productCode:code
      }).then(res=>{
        this.productList=res.data
        console.log('this: '+this.productList)

      })
    },
    //监听上传了文件
    changePdf(file, fileList){
       this.updateForm.pdfname = file.name
       console.log('==file==>' + file.name)
       console.log('==file==>' + fileList)
       this.updateForm.pdfUrl = "";
       this.pdfFile = file
    },
    // 上传前-拦截上传格式
    beforeUploadPdf (file) {
      console.log('==file==>' + file)
      this.updateForm.pdfUrl = "";
      this.pdfFile = file
    },
    summitUpload(){
      this.$refs.uploadMutiple.submit();
    },
    uploadPdf () {
      let param = new FormData()  // 创建form对象
      param.append('file', this.pdfFile)

 
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      }
      //axios.post('http://fox.foxcore.cn/api/v1/file/pdf/product', param, config)
      axios.post('http://fox.foxcore.cn/api/v1/product/makeup/applyByExcel', param, config)
        .then(response => {
          if (response.data.status === 200) {
            this.updateForm.pdfUrl = response.data.data
            this.updateForm.pdfUrl = 'http://oss.dataos.top/' + response.data.data
            this.$message.success('上传文档成功')
            this.uploadDateSheetVisible = false;

          }
        })
    },
    applyProDialog(){
      this.isUpdate=false
      this.dialogVisible=true
      this.supplementForm= {
        aksNum: "",
        productManuNum: "",
        meunId: "",
        menuName: "",
        memo: "",
        productAddress: "",
        unit: "",
        stock: "",
        price: "",
        dollar:'',
        tax: '',
        dealTime: "",
      }
    },
    searchData(){
      this.getList()
    },
    checkDetail(row){
      this.detailDialogFormVisible=true
      this.supplementForm=row
      if(this.supplementForm.status==1){
        this.supplementForm.status_zh="已审批"
      }else if(this.supplementForm.status==2){
        this.supplementForm.status_zh="已婉拒"
      }else{
        this.supplementForm.status_zh="待审批"
      }
      if(this.supplementForm.inStore==1){
        this.supplementForm.inStore="是"
      }else{
        this.supplementForm.inStore="否"
      }
      console.log("==ssss=>"+this.supplementForm.status)
    },
    //供应商
    getAllList () {
      SUPPLIER_ALLLIST().then(res => {
        this.AllSlist = res.data
        console.log(this.AllSlist)
      })
    },
    downloadExcel(){
      var url = 'http://yzbban.oss-cn-shanghai.aliyuncs.com/excel/example/add_makeup_example.xlsx'
      location.href = url
    },
    //导出
    downLoadData(){
      MAKEUP_DOWNLOAD({
        menuId: this.downLoadForm.value,
        startTime:Math.floor(new Date(this.searchForm.timeRange[0]).getTime()/1000),
        endTime:Math.floor(new Date(this.searchForm.timeRange[1]).getTime()/1000),
        status:this.downLoadForm.statusValue,
        userRange:2
      }).then(res => {
        console.log(res.data)
        var url = this.downloadUrl + res.data
        location.href = url
        this.dialogFormVisible = false
      })
    },
    getList () {
      PRODUCT_MAKEUP_LIST({
          menuId:this.searchForm.value,
          productCode:this.searchForm.aksNum,
          startTime:Math.floor(new Date(this.searchForm.timeRange[0]).getTime()/1000),
          endTime:Math.floor(new Date(this.searchForm.timeRange[1]).getTime()/1000),
          pageNo: this.currentPage,
          pageSize: this.pageSize,
          pageFlag:1
      }).then(res => {
        this.tableData = res.data.dataList
        this.total = res.data.count
        for (let i in this.tableData) {
          this.tableData[i].oldstatus = this.tableData[i].status
          this.tableData[i].dealTime = this.formatSecond(this.tableData[i].dealTime)
        }
      })
    },
    // 根据样品ID 查询样品详情
    querySingleSample () {
      MENUINFOBYLIAOHAO({
        productNumber: this.supplementForm.aksNum
      }).then(res => {
        console.log("res : " + JSON.stringify(res))
        // 赋值到样品名称
        this.supplementForm.productManuNum = res.data.productStoreName
        this.supplementForm.menuName = res.data.menuName
        this.supplementForm.meunId = res.data.menuId

      })
    },
    applyProduct () {
        var ca
        for(ca of this.productList){
          if(ca.id==this.productListValue){
            this.supplementForm.menuName=ca.menuName
            this.supplementForm.menuId=ca.menuId
            this.supplementForm.productCode=ca.productCode
            this.supplementForm.productArea=ca.productArea
          }
        }
        PRODUCT_MAKEUP_APPLY({
        productId:this.productListValue,
        aksNum: this.supplementForm.aksNum,
        meunName: this.supplementForm.menuName,
        meunId: this.supplementForm.menuId,
        productManuNum: this.supplementForm.productCode,
        productAddress: this.supplementForm.productArea,
        memo: this.supplementForm.memo,
        unit: "个",
        price: this.supplementForm.price,
        dollar: this.supplementForm.dollar,
        stock: this.supplementForm.stock,
        tax: this.supplementForm.tax,
        dealTime: this.supplementForm.dealTime.getTime() / 1000,
      }).then(res => {
        this.getList()
        this.dialogVisible = false
      })

    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getList()
    },
    //时间格式化  
    formatSecond (second) {
      if (!second) return "";
      return formatDate(new Date(second * 1000), "yyyy-MM-dd hh:mm:ss");
    },
  }
};
</script>

<style lang="scss" scoped>
p {
  font-size: 20px;
  padding: 10px 0;
}
.tableBox {
  width: 100%;
  background: #fff;
  padding: 10px 2px;
  border-radius: 5px;
  //   box-shadow: 2px 3px 15px 0 #ccc;
}
</style>